import * as React from 'react';
import * as action from './store/action'
import {Route,Routes,useLocation} from 'react-router-dom'
import {Tabba,TabbaItem} from './components'
import {tabbaRoute}from './router'
import {mainRouter} from './view/Home/router'
import {findRouter} from './view/Find/router'
import {connect} from 'react-redux'
import {storeData} from './store/interface'
interface appProps{
  index:string;
  setIndexDispatch:Function;
}
function App(props:appProps) {
  //拿到全局store中的数据 和 dispath
  let {index,setIndexDispatch:changeIndex} = props
  let {pathname} = useLocation()
  let needNav = ['/find','/map','/','/activity','/me']
  index = pathname
  
  return (
    <>
    <Routes>
      {tabbaRoute.map(item=><Route  path={item.path} key={item.id}  element={<item.element/>} />)}
      {mainRouter.map(item=><Route path={item.path} key={item.id} element={<item.element/>}></Route>)}
      {/* 文章详情页路由 */}
      {findRouter.map(item=><Route path={item.path} key={item.id} element={<item.element/>}></Route>)}
    </Routes>
    {
      needNav.includes(pathname)?
      <Tabba>
      {tabbaRoute.map((item)=>
        <TabbaItem  
          itemKey={item.path} 
          key={item.path}
          activeKey={index} 
          lightHight={changeIndex} 
          activeIcon={item.activeIcon} 
          icon={item.icon} 
          title={item.title}/>)
        }
      </Tabba>:
      <></>
    }
   
    </>
  )
}

const mapStateToProps = (state:storeData) => {
  return {
      index: state.app.index
  }
}
const mapStateToDisPatch = (dispatch:Function) => {
  return {
      setIndexDispatch(index:string) {
          dispatch(action.setIndex(index))
      }
  }
}

export default connect(mapStateToProps,mapStateToDisPatch)(React.memo(App))
